<script lang="ts" setup>
import { getbxjkxllm, getbxjkxllmList, getdslmList, getgblmList, getsqbxjkList, getsxrbList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const title = ref('百姓健康系列栏目')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const total = ref(0)
const infoType = ref('1')
const list = ref<any[]>([])
const listsxrb = ref<any[]>([])
const listsxrbArr = ref<any[]>([])
const listsqbxjk = ref<any[]>([])
const listsqbxjkArr = ref<any[]>([])
const listsxlnjkb = ref<any[]>([])
const listsxlnjkbArr = ref<any[]>([])
const listdslm = ref<any[]>([])
const listdslmArr = ref<any[]>([])
const listgblm = ref<any[]>([])
const listgblmArr = ref<any[]>([])
const listxmt = ref<any[]>([
  {
    title: '抖音',
    url: '/img/douyin.png',
  },
  // {
  //   title: '微博',
  //   url: '/img/weibo.png',
  // },
  {
    title: '公众号',
    url: '/img/gzh.png',
  },
  {
    title: '视频号',
    url: '/img/sph.png',
  },
])
const infocss = ref('background:linear-gradient(88.92deg, rgba(92,224,168,0.41) 1.07%,rgba(195,228,214,0.22) 99.94%);padding-left:10px')
const queryParams = reactive(
  {
    page: {
      rownumber: 4,
      pageNo: 1,
    },
    condition: [],
  },
)
const queryParams1 = reactive(
  {
    page: {
      rownumber: 12,
      pageNo: 1,
    },
    condition: [],
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 3,
      pageNo: 1,
    },
    order: [{
      colName: 'release_time',
      orderType: 'desc',
    }],
    condition: [
      {
        colName: 'column_recommendation',
        ruleType: 'eq',
        value: '是',
      },
    ],
  },
)
const subType = ['《陕西日报》专版', '《三秦百姓健康》杂志', '《陕西老年健康报》专版', '电视栏目', '广播栏目', '新媒体']

// 分页参数更改
function onPageChange(params: { pageNum: number, pageSize: number }) {
  queryParams1.page.pageNo = params.pageNum
  queryParams1.page.rownumber = params.pageSize
  if (infoType.value === '《陕西日报》专版') {
    getSxrbData()
  }
  else if (infoType.value === '《三秦百姓健康》杂志') {
    getSqbxjkData()
  }
  else if (infoType.value === '《陕西老年健康报》专版') {
    getSxlnjkbData()
  }
  else if (infoType.value === '电视栏目') {
    getDslmData()
  }
  else if (infoType.value === '广播栏目') {
    getGblmData()
  }
}
function typeClick(item: any) {
  list.value = []
  queryParams1.page.pageNo = 1
  infoType.value = item
  if (item === '《陕西日报》专版') {
    getSxrbData()
  }
  else if (item === '《三秦百姓健康》杂志') {
    getSqbxjkData()
  }
  else if (item === '《陕西老年健康报》专版') {
    getSxlnjkbData()
  }
  else if (item === '电视栏目') {
    getDslmData()
  }
  else if (item === '广播栏目') {
    getGblmData()
  }
  else if (item === '新媒体') {
    listxmt.value.forEach((item) => {
      list.value.push({
        classify_name: '新媒体',
        cover_file_name: item.url,
        title_name: item.title,
      })
    })
  }
}
// 《陕西日报》专版
function getSxrbData() {
  getsxrbList(queryParams1).then((res) => {
    total.value = res.page.total
    listsxrbArr.value = res.data
    res.data.forEach((item) => {
      list.value.push({
        classify_name: '《陕西日报》专版',
        cover_file_name: item.img_url,
        title_name: item.periods,
        pt_uid: item.uid,
      })
    })
  }).catch(() => {
  })
}
// 《三秦百姓健康》杂志
function getSqbxjkData() {
  getsqbxjkList(queryParams1).then((res) => {
    total.value = res.page.total
    listsqbxjkArr.value = res.data
    res.data.forEach((item) => {
      item.classify_name = '《三秦百姓健康》杂志'
    })
    list.value = res.data
  }).catch(() => {
  })
}
// 《陕西老年健康报》专版
function getSxlnjkbData() {
  getbxjkxllmList(queryParams1).then((res) => {
    total.value = res.page.total
    listsxlnjkbArr.value = res.data
    res.data.forEach((item) => {
      list.value.push({
        classify_name: '《陕西老年健康报》专版',
        cover_file_name: item.img_url,
        title_name: item.periods,
        pt_uid: item.uid,
      })
    })
  }).catch(() => {
  })
}
// 电视栏目
function getDslmData() {
  getdslmList(queryParams1).then((res) => {
    total.value = res.page.total
    listdslmArr.value = res.data
    res.data.forEach((item) => {
      item.classify_name = '电视栏目'
    })
    list.value = res.data
  }).catch(() => {
  })
}
// 广播栏目
function getGblmData() {
  getgblmList(queryParams1).then((res) => {
    total.value = res.page.total
    listgblmArr.value = res.data
    res.data.forEach((item) => {
      item.classify_name = '广播栏目'
      item.cover_file_name = '/img/video.png'
    })
    list.value = res.data
  }).catch(() => {
  })
}
const loading1 = ref(false)
const loading2 = ref(false)
const loading3 = ref(false)
const loading4 = ref(false)
const loading5 = ref(false)
const loading6 = ref(false)
function getData() {
  loading1.value = true
  getsxrbList(queryParams).then((res) => {
    loading1.value = false
    listsxrb.value = res.data
  }).catch(() => {
    loading1.value = false
  })
  loading2.value = true
  getsqbxjkList(queryParams).then((res) => {
    loading2.value = false
    listsqbxjk.value = res.data
  }).catch(() => {
    loading2.value = false
  })
  loading3.value = true
  getbxjkxllmList(queryParams).then((res) => {
    loading3.value = false
    listsxlnjkb.value = res.data
  }).catch(() => {
    loading3.value = false
  })
  loading4.value = true
  getdslmList(queryParams).then((res) => {
    loading4.value = false
    listdslm.value = res.data
  }).catch(() => {
    loading4.value = false
  })
  loading5.value = true
  getgblmList(queryParams).then((res) => {
    loading5.value = false
    listgblm.value = res.data
  }).catch(() => {
    loading5.value = false
  })
  loading6.value = true
  getdslmList(queryParams2).then((res) => {
    loading6.value = false
    list.value = res.data
  }).catch(() => {
  })
}
function toDetail(item: object, type: string) {
  if (type === '百姓健康系列栏目/电视栏目') {
    type = '电视栏目'
  }
  navigateTo({
    path: `/peopleHealth/peopleHealthSeriesDetail/${item.id}`,
    query: {
      type,
      // fileNo: item.pdf_file_name,
      // data: encode(item),
    },
  })
}
async function backInit() {
  location.reload()
}
getData()
</script>

<template>
  <div>
    <PublicSearch type="百姓健康系列栏目" />
    <PublicSearchDialog type="百姓健康系列栏目" />
    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath" class="relative">
          <!-- <div v-if="infoType!=1" style="position: fixed;top :-120px;left:0" class="cursor-pointer" @click="backInit">< &nbsp;返回</div> -->
          <div class="mt-20px flex justify-between">
            <div v-if="infoType === '《陕西日报》专版'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">《陕西日报》专版</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div
                  v-for="item in listsxrbArr" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                  hover="text-#0E9472" @click="toDetail(item, '《陕西日报》专版')"
                >
                  <div class="w-100% flex justify-center">
                    <img class="inline-block" :src="getImgUrl(item.img_url, true)" alt="">
                  </div>
                  <div class="truncate p-2" text="14px">
                    {{ item.periods }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="queryParams1.page.rownumber" :total="total"
                @change="onPageChange"
              />
            </div>
            <div v-if="infoType === '《三秦百姓健康》杂志'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">《三秦百姓健康》杂志</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div
                  v-for="item in listsqbxjkArr" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                  hover="text-#0E9472" @click="toDetail(item, '《三秦百姓健康》杂志')"
                >
                  <div class="w-100% flex justify-center">
                    <img class="inline-block" :src="getImgUrl(item.cover_file_name, true)" alt="">
                  </div>
                  <div class="truncate p-2" text="14px">
                    {{ item.title_name }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="queryParams1.page.rownumber" :total="total"
                @change="onPageChange"
              />
            </div>
            <div v-if="infoType === '《陕西老年健康报》专版'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">《陕西老年健康报》专版</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div
                  v-for="item in listsxlnjkbArr" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                  hover="text-#0E9472" @click="toDetail(item, '《陕西老年健康报》专版')"
                >
                  <div>
                    <img :src="getImgUrl(item.img_url, true)" alt="">
                  </div>
                  <div class="truncate p-2" text="14px">
                    {{ item.periods }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="queryParams1.page.rownumber" :total="total"
                @change="onPageChange"
              />
            </div>
            <div v-if="infoType === '电视栏目'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">电视栏目</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div
                  v-for="item in listdslmArr" :key="item.id" border="1px solid #eee" class="relative cursor-pointer"
                  hover="text-#0E9472" @click="toDetail(item, '电视栏目')"
                >
                  <div>
                    <img class="h-147px w-233px" :src="getImgUrl(item.cover_file_name, true)" alt="">
                  </div>
                  <div class="absolute left-42% top-35% h-40px w-40px flex rounded-full bg-[#0310109c]">
                    <img src="/img/play.png" alt="">
                  </div>
                  <div class="truncate p-2" text="14px">
                    {{ item.title_name }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="queryParams1.page.rownumber" :total="total"
                @change="onPageChange"
              />
            </div>
            <div v-if="infoType === '广播栏目'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">广播栏目</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div
                  v-for="item in listgblmArr" :key="item.id" border="1px solid #eee" class="relative cursor-pointer"
                  hover="text-#0E9472" @click="toDetail(item, '广播栏目')"
                >
                  <div>
                    <img class="h-147px w-233px" src="/img/video.png" alt="">
                  </div>
                  <div class="absolute left-42% top-35% h-40px w-40px flex rounded-full bg-[#0310109c]">
                    <img src="/img/play.png" alt="">
                  </div>
                  <div class="truncate p-2" text="14px">
                    {{ item.title_name }}
                  </div>
                </div>
              </div>
              <PublicPagination
                :page-size="queryParams1.page.rownumber" :total="total"
                @change="onPageChange"
              />
            </div>
            <div v-if="infoType === '新媒体'" class="w-80%">
              <div class="flex items-center py-5">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#016738">新媒体</span>
              </div>
              <div class="grid grid-cols-4 gap-3">
                <div v-for="item in listxmt" :key="item.id" border="1px solid #eee" class="relative" hover="text-#0E9472">
                  <div class="flex justify-center">
                    <img class="h-195px w-195px" :src="item.url" alt="">
                  </div>
                  <div class="p-2 text-center" text="14px">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
            <div v-if="infoType === '1'" class="w-80%">
              <div>
                <div class="h-40px flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">《陕西日报》专版</span>
                  </div>
                  <div class="flex cursor-pointer items-center" @click="typeClick('《陕西日报》专版')">
                    <div class="">
                      更多
                    </div>
                    <img class="ml-5px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div v-loading="loading1" class="grid grid-cols-4 min-h-100px gap-3">
                  <div
                    v-for="item in listsxrb" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                    hover="text-#0E9472" @click="toDetail(item, '《陕西日报》专版')"
                  >
                    <div class="w-100% flex justify-center">
                      <img class="inline-block h-235px w-196px" :src="getImgUrl(item.img_url, true)" alt="">
                    </div>
                    <div class="truncate p-2" text="14px">
                      {{ item.periods }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5">
                <div class="h-40px flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">《三秦百姓健康》杂志</span>
                  </div>
                  <div class="flex cursor-pointer items-center" @click="typeClick('《三秦百姓健康》杂志')">
                    <div>更多</div>
                    <img class="ml-5px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div v-loading="loading2" class="grid grid-cols-4 gap-3" min-h-100px>
                  <div
                    v-for="item in listsqbxjk" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                    hover="text-#0E9472" @click="toDetail(item, '《三秦百姓健康》杂志')"
                  >
                    <div class="w-100% flex justify-center">
                      <img class="inline-block h-235px w-196px" :src="getImgUrl(item.cover_file_name, true)" alt="">
                    </div>
                    <div class="truncate p-2" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5">
                <div class="h-40px flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">《陕西老年健康报》专版</span>
                  </div>
                  <div class="flex cursor-pointer items-center" @click="typeClick('《陕西老年健康报》专版')">
                    <div>更多</div>
                    <img class="ml-5px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div v-loading="loading3" class="grid grid-cols-4 gap-3" min-h-100px>
                  <div
                    v-for="item in listsxlnjkb" :key="item.id" class="cursor-pointer" border="1px solid #eee"
                    hover="text-#0E9472" @click="toDetail(item, '《陕西老年健康报》专版')"
                  >
                    <div>
                      <img class="inline-block h-152px w-233px" :src="getImgUrl(item.img_url, true)" alt="">
                    </div>
                    <div class="truncate p-2" text="14px">
                      {{ item.periods }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5">
                <div class="h-40px flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">电视栏目</span>
                  </div>
                  <div class="flex cursor-pointer items-center" @click="typeClick('电视栏目')">
                    <div>更多</div>
                    <img class="ml-5px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div v-loading="loading4" class="grid grid-cols-4 gap-3" min-h-100px>
                  <div
                    v-for="item in listdslm" :key="item.id" border="1px solid #eee" class="relative cursor-pointer"
                    hover="text-#0E9472" @click="toDetail(item, '电视栏目')"
                  >
                    <div>
                      <img class="inline-block h-152px w-233px" :src="getImgUrl(item.cover_file_name, true)" alt="">
                    </div>
                    <div
                      class="absolute left-42% top-35% h-40px w-40px flex rounded-full bg-[#0310109c]"
                    >
                      <img src="/img/play.png" alt="">
                    </div>
                    <div class="truncate p-2" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5">
                <div class="h-40px flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">广播栏目</span>
                  </div>
                  <div class="flex cursor-pointer items-center" @click="typeClick('广播栏目')">
                    <div>更多</div>
                    <img class="ml-5px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div v-loading="loading5" class="grid grid-cols-4 gap-3" min-h-100px>
                  <div
                    v-for="item in listgblm" :key="item.id" border="1px solid #eee" class="relative cursor-pointer"
                    hover="text-#0E9472" @click="toDetail(item, '广播栏目')"
                  >
                    <div>
                      <img class="inline-block h-152px w-233px" src="/img/video.png" alt="">
                    </div>
                    <div
                      class="absolute left-42% top-35% h-40px w-40px flex rounded-full bg-[#0310109c]"
                    >
                      <img src="/img/play.png" alt="">
                    </div>
                    <div class="truncate p-2" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5">
                <div class="h-40px flex">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#0E9472" />
                    <span class="pl-4 font-extrabold" text="#016738">新媒体</span>
                  </div>
                </div>
                <div class="grid grid-cols-4 gap-3">
                  <div v-for="item in listxmt" :key="item.id" border="1px solid #eee" class="relative" hover="text-#0E9472">
                    <div class="flex justify-center">
                      <img class="h-195px w-195px" :src="item.url" alt="">
                    </div>
                    <div class="p-2 text-center" text="14px">
                      {{ item.title }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-18%">
              <div>
                <div
                  class="h-10px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                />
                <div class="rounded-bl rounded-br" border="2px solid #50bc8d">
                  <div
                    v-for="item in subType" :key="item" class="cursor-pointer p-2 pl-10" text="14px"
                    :style="infoType === item ? infocss : ''" @click="typeClick(item)"
                  >
                    <i
                      v-if="infoType === item"
                      class="i-ri:arrow-right-circle-line h-25px w-25px cursor-pointer text-#50bc8d"
                    />
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="mt-20px">
                <div
                  class="h-30px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #50bc8d">
                  <div
                    v-for="item in list.slice(0, 3)" :key="item.id" class="cursor-pointer"
                    hover="text-#0E9472" @click="toDetail(item, item.classify_name)"
                  >
                    <img :src="getImgUrl(item.cover_file_name, true)" alt="">
                    <div class="py-10px" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
